<!--
 * @Description  : 用户详情
 * @Author       : zhao
 * @Date         : 2022-08-02 15:25:59
 * @LastEditors  : zhao
 * @LastEditTime : 2022-09-19 09:35:08
-->

<template>
    <div class='details'>
        <ztitle :name="'借阅用户详情'" :back="true" />
        <el-descriptions title="个人信息" :column="3">
            <el-descriptions-item label="账号">
                <span>{{ state.UserInfo.userName }}</span>
            </el-descriptions-item>
            <el-descriptions-item label="手机号">
                <span>{{ state.UserInfo.phone }}</span>
            </el-descriptions-item>

            <el-descriptions-item label="用户名">
                <span>{{ state.UserInfo.realName }}</span>
            </el-descriptions-item>
            <el-descriptions-item label="身份证">
                <span>{{ state.UserInfo.idNumber }}</span>
            </el-descriptions-item>
            <el-descriptions-item label="邮箱">
                <span>{{ state.UserInfo.mail }}</span>
            </el-descriptions-item>
            <el-descriptions-item label="职务">
                <span>{{ state.UserInfo.duty }}</span>
            </el-descriptions-item>
            <el-descriptions-item label="固定电话">
                <span>{{ state.UserInfo.fixedPhone }}</span>
            </el-descriptions-item>
            <el-descriptions-item label="邮编">
                <span>{{ state.UserInfo.postalCode }}</span>
            </el-descriptions-item>
        </el-descriptions>
        <el-descriptions title="单位信息" :column="3">
            <el-descriptions-item label="工作单位">
                <span>{{ state.UserInfo.workCompany }}</span>
            </el-descriptions-item>
            <el-descriptions-item label="单位性质">
                <span>{{ state.UserInfo.unitProperties }}</span>
            </el-descriptions-item>
            <el-descriptions-item label="所属行业">
                <span>{{ state.UserInfo.profession }}</span>
            </el-descriptions-item>
            <el-descriptions-item label="单位地址">
                <span>{{ state.UserInfo.companyAddress }}</span>
            </el-descriptions-item>
            <!-- <el-descriptions-item label="详细地址">
                <span>{{ state.UserInfo.detailedAddress }}</span>
            </el-descriptions-item> -->
        </el-descriptions>
    </div>
</template>

<script setup lang='ts'>
import { ref, reactive } from 'vue'
import { useTableInfo } from '/@/stores/ztable'
import ztitle from "/@/components/ztitle/index.vue"
import { toRaw } from '@vue/reactivity'
let useTableInfos = useTableInfo()
let state = <any>reactive({
    UserInfo: {}
})
const initData = () => {
    const data = useTableInfos.zTable.rowData
    console.log("🚀 ~ file: details.vue ~ line 70 ~ initData ~ data", data)
    state.UserInfo = { ...data }
}
initData()
</script>
<style lang='scss' scoped>
.details {
    background: white;
    padding: 20px;
    // min-height: $height_full;
    font-size: 0.259rem !important;
}


::v-deep(.el-descriptions) {
    padding: 10px 30px;
    padding-bottom: 50px;

    .el-descriptions__title {
        // font-size: 0.3rem !important;
        padding-top: 10px;
    }

    .el-descriptions-item__label {
        font-size: 0.26rem;
        color: #333;
    }

    .el-descriptions-item__content {
        color: #999;
    }
}
</style>
